<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine',
  props: {
    value: Array,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    hexToRgba (hex, opacity) {
      let rgbaColor = ''
      let reg = /^#[\da-f]{6}$/i
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
          '0x' + hex.slice(3, 5)
        )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
      }
      return rgbaColor
    }
  },
  mounted () {
    var base = +new Date(2020, 0, 0)
    var oneDay = 24 * 3600 * 1000
    var date = []

    var data = [Math.random() * 300]
    var data2 = [Math.random() * 300]
    var data3 = [Math.random() * 300]
    var data4 = [Math.random() * 300]
    var data5 = [Math.random() * 300]
    for (var i = 1; i < 367; i++) {
      var now = new Date(base += oneDay)
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      data2.push(Math.round((Math.random() - 0.5) * 20 + data2[i - 1]))
      data3.push(Math.round((Math.random() - 0.5) * 20 + data3[i - 1]))
      data4.push(Math.round((Math.random() - 0.5) * 20 + data4[i - 1]))
      data5.push(Math.round((Math.random() - 0.5) * 20 + data5[i - 1]))
    }
    this.$nextTick(() => {
    //   let xAxisData = Object.keys(this.value)
      let option = {
        tooltip: {
          trigger: 'axis',

          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: '0',
          text: '大数据量面积图'
        },
        legend: {
          top: '8%',
          right: '0',
          itemGap: 50,
          textStyle: {
            color: '#ACCFFF',
            fontSize: 14
          }
        },
        grid: {
          left: '0%',
          right: '1%',
          top: '20%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
          axisLabel: {
            formatter: function (value, index) {
              // 格式化成月/日，只在第一个刻度显示年份
              var date = new Date(value)
              var texts = [(date.getMonth() + 1), date.getDate()]
              return texts.join('/')
            }

          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        series: [
          {
            name: '2020预算',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#CA76C4'
            },

            data: data
          },
          {
            name: '2019预算',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#EFAA4E'
            },

            data: data2
          },
          {
            name: '本行指标',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#75CFA0'
            },

            data: data3
          }, {
            name: '2019同业',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#C75E5E'
            },

            data: data4
          }, {
            name: '2019本行指标',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: '#4250BA'
            },

            data: data5
          }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
